Problem Statement
This startup required immediate assistance in revamping a section of its website within a tight 2-day deadline. Despite the daunting nature of the task due to the lack of structure in the previous design and the near absence of brand identity, I willingly accepted the challenge.
End-User Goals
The primary end-user goals centered on enabling seamless B2B service exchanges through a user-friendly interface, fostering swift and secure transactions
My Approach
Before starting, I created a simple brand identity for the startup. Due to time constraints, I concentrated on colors and typography. Following extensive research and considering my client's preferences, I opted for a monochrome green color scheme. Green symbolizes safety and reliability, key aspects of the startup's identity.
Subsequently, I explored the web for inspiration. Finding websites with comparable concepts proved challenging, so I delved into the UI elements as well.
Sidebar and Top Navigation
The old sidebar was too big and took up too much space on the screen, so I made a change. The new sidebar now has two modes - it expands only when the mouse is inside, so it's not always large, allowing the user to concentrate on the key content - the offers in the center of the site. In addition, I included two more elements in the sidebar - log out and add offers buttons. My past experience and insights from other designers suggest that they should be easily accessible to the user.
I also rearranged the top navigation bar, opting for a more common approach by grouping filters together and placing the search button next to the search bar.
Main Dashboard Results
Product Page
The product page required significant enhancements. Initially, I introduced breadcrumbs at the top to aid users in understanding their current location on the website. Additionally, I revamped the product photo gallery for a more visually appealing appearance. Instead of the product description, I integrated the company description, considering that a company typically offers multiple products.
The most challenging aspect was the exchange section, which needed to comprise two parts - company #2's offers followed by company #1's (our logged-in user) relevant services eligible for exchange with company #2's services.
I opted for two states - first, before selecting the desired service/offer, where your own offers are not visible, and second, after choosing your preferred service from company #1, you can view your company's services of equivalent value available for exchange.
I opted for two states - first, before selecting the desired service/offer, where your own offers are not visible, and second, after choosing your preferred service from company #1, you can view your company's services of equivalent value available for exchange.
Product Page Results
Watch the Prototype Flow below
